<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_初识Vue</title>
  <script type="text/javascript" src="../vue.js/vue.js"></script>
</head>

<body>

  <div id="root">
    <h1>Hello, 尚硅谷{{ name }}</h1>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip = false;

    const V = new Vue({
      el: '#root',
      data: {
        name: '大前端'
      }
    })
  </script>

</body>

</html>

<!-- 
    初始Vue:
      1. 想让 Vue工作, 就必须创建一个 Vue 实例, 且要传入一个配置对象
      2. root 容器里面的代码依然符合 html 规范, 只不过混入了一些特殊的 Vue 语法
      3. root 容器里面的代码被称为 【Vue模板
      4. {{ xxx }} 中的 xxx 要写 js表达式, 且 xxx 可以自动读取到 data 中的所有属性


  1. 准备好一个容器
    => <div id="root"></div>
    => 用做 Vue 渲染内容的容器.

  2. 创建 vue 实例
    => 配置项: 写成一个对象.
      -> el: 相当于原生中的(element) 
        + 作用: 用于指定当前 Vue 实例为哪一个容器服务, 
          - 值: 通常为 css 选择器字符串, 还可以写成 document.getElementById('root')

      -> data:  
        + 作用: 用于存储数据,数据供 el 所指定的容器去使用,
          - 值: 目前建议写成对象的形式, 便于书写多条数据

  3. {{ }}
    => vue提供的 插值语法:
      -> 内部用于书写 js表达式

  注意区分: js表达式 和 js代码(语句)
      1. 表达式: 一个表达式会生成一个值, 可以放在任何一个需要值的地方:
        (1). a
        (2). a+b
        (3). demo(1)
        (4). x === y ? 'a' : 'b'

      2. js代码(语句)
        (1). if(){}
        (2). for(){}
-->